﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="/print/jquery.min.js"></script>
    <script type="text/javascript" src="/print/js/jspdf.min.js"></script>
</head>
<body>
    <button onclick="javascript:demoFromHTML()" class="button">Run Code</button>
    <div style="border-width: 2px; border-style: dotted; padding: 1em; font-size:120%;line-height: 1.5em;">
        <h2 style="font-size:120%">Header Two iis</h2>
    </div>
    <div class="code-box" id="fromHTMLtestdiv" style="display: flex;    padding:15px 5px;">
        <div class="code-list" id="html-content-holder">
            <div class="box1" style="margin: 0 auto;    position: relative;">
                <div class="A4" style="width: 210mm;
    height: 297mm;
    display: block;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 auto;
    position: relative;
    align-items: flex-start;
    align-content: flex-start;
    text-align: left;">
                    <div class="box" data-index="0" style="display: inline-block;    width: 32mm;    height: 45mm;    position: relative;    border-right-width: 1px;    border-bottom-width: 1px;
    border-right-style: solid;    border-bottom-style: solid;    margin-top: 0;    margin-bottom: 0;    margin-left: 0mm;">
                        <div class="qrcode" style="width: 30mm;
    height: 40mm;
    margin: 0 auto;
    padding-top: 3.5mm;">
                            <span class="cnaidc" style=" display block;
                                  width 100%;
                                  margin-right auto;
                                  margin-left auto;" id="LBC20091800001" data-code="LBC20091800001" title="LBC20091800001">
                                <canvas width="256" height="256" style="display: none;"></canvas>
                                <img style="display: block;    width: 28mm;    height: 28mm;    margin: 0 auto;" src="" style="display: block;">
                            </span><h5>LBC20091800001</h5>
                        </div>
                    </div>
                    <div class="box" data-index="0" style="display: inline-block;    width: 32mm;    height: 45mm;    position: relative;    border-right-width: 1px;    border-bottom-width: 1px;
    border-right-style: solid;    border-bottom-style: solid;    margin-top: 0;    margin-bottom: 0;    margin-left: 0mm;">
                        <div class="qrcode" style="width: 30mm;
    height: 40mm;
    margin: 0 auto;
    padding-top: 3.5mm;">
                            <span class="cnaidc" style=" display block;
                                  width 100%;
                                  margin-right auto;
                                  margin-left auto;" id="LBC20091800001" data-code="LBC20091800001" title="LBC20091800001">
                                <canvas width="256" height="256" style="display: none;"></canvas>
                                <img style="display: block;    width: 28mm;    height: 28mm;    margin: 0 auto;" src="" style="display: block;">
                            </span><h5>LBC20091800001</h5>
                        </div>
                    </div><div class="box" data-index="0" style="display: inline-block;    width: 32mm;    height: 45mm;    position: relative;    border-right-width: 1px;    border-bottom-width: 1px;
    border-right-style: solid;    border-bottom-style: solid;    margin-top: 0;    margin-bottom: 0;    margin-left: 0mm;">
    <div class="qrcode" style="width: 30mm;
    height: 40mm;
    margin: 0 auto;
    padding-top: 3.5mm;">
        <span class="cnaidc" style=" display block;
              width 100%;
              margin-right auto;
              margin-left auto;" id="LBC20091800001" data-code="LBC20091800001" title="LBC20091800001">
            <canvas width="256" height="256" style="display: none;"></canvas>
            <img style="display: block;    width: 28mm;    height: 28mm;    margin: 0 auto;" src="" style="display: block;">
        </span><h5>LBC20091800001</h5>
    </div>
</div><div class="box" data-index="0" style="display: inline-block;    width: 32mm;    height: 45mm;    position: relative;    border-right-width: 1px;    border-bottom-width: 1px;
    border-right-style: solid;    border-bottom-style: solid;    margin-top: 0;    margin-bottom: 0;    margin-left: 0mm;">
    <div class="qrcode" style="width: 30mm;
    height: 40mm;
    margin: 0 auto;
    padding-top: 3.5mm;">
        <span class="cnaidc" style=" display block;
              width 100%;
              margin-right auto;
              margin-left auto;" id="LBC20091800001" data-code="LBC20091800001" title="LBC20091800001">
            <canvas width="256" height="256" style="display: none;"></canvas>
            <img style="display: block;    width: 28mm;    height: 28mm;    margin: 0 auto;" src="" style="display: block;">
        </span><h5>LBC20091800001</h5>
    </div>
</div>                </div>
            </div>
        </div>

    </div>
    <link rel="stylesheet" href="/print/print.css?v=1.0.0" media="all">
    <script>

        function demoFromHTML() {
            var pdf = new jsPDF('p', 'pt', 'letter')

            // source can be HTML-formatted string, or a reference
            // to an actual DOM element from which the text will be scraped.
            , source = $('#fromHTMLtestdiv')[0]

            // we support special element handlers. Register them with jQuery-style
            // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
            // There is no support for any other type of selectors
            // (class, of compound) at this time.
            , specialElementHandlers = {
                // element with id of "bypass" - jQuery style selector
                '#bypassme': function (element, renderer) {
                    // true = "handled elsewhere, bypass text extraction"
                    return true
                }
            }

            margins = {
                top: 80,
                bottom: 60,
                left: 40,
                width: 522
            };
            // all coords and widths are in jsPDF instance's declared units
            // 'inches' in this case
            pdf.fromHTML(
                source // HTML string or DOM elem ref.
                , margins.left // x coord
                , margins.top // y coord
                , {
                    'width': margins.width // max width of content on PDF
                    , 'elementHandlers': specialElementHandlers
                },
                function (dispose) {
                    // dispose: object with X, Y of the last line add to the PDF
                    //          this allow the insertion of new lines after html
                    pdf.save('Test.pdf');
                },
                margins
            )
        }
    </script>
</body>
</html>
